<!DOCTYPE html>
<html>
  <head>
    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../tf-tensorboard.html">
    <link rel="stylesheet" type="text/css" href="../../../lib/css/global.css">
    <title>TensorBoard Demo</title>
  </head>
  <body>
    <base href="/">
    <dom-module id="x-demo">
      <template>
        <tf-tensorboard
          id="demo"
          router="[[demoRouter]]">
        </tf-tensorboard>
      </template>
      <script>
        var dataDir = "components/tf-tensorboard/demo/data/";
        var demoRouter = {
          runs: function() { return dataDir + "runs.json";},
          graph: function(run) {return dataDir + run + "-graph.pbtxt";},
          scalars: function(tag, run) {
            return dataDir + run.split("_")[0] + ".json";
          },
        };
        Polymer({
          is: "x-demo",
          properties: {
            demoRouter: {
              type: Object,
              value: demoRouter,
            },
          },
        });
      </script>
    </dom-module>
    <x-demo></x-demo>
  </body>
</html>
